<template>
  <div class="keda-login clearfix">
    <div class="keda-login-form">
      <div class="keda-login-row">
        <input type="text" class="keda-input" v-model="form.loginName" placeholder="请输入用户名">
      </div>
      <div class="keda-login-row">
        <input type="text" class="keda-input" v-model="form.pwd" placeholder="请输入密码">
      </div>

      <div class="keda-login-row">
        <input
          type="text"
          class="keda-input chk_code_input"
          v-model="form.checkCode"
          placeholder="请输入验证码"
        >
        <img
          src="http://172.16.176.155/portal/verifyImage?random=1542869409282"
          class="chk_code_img"
          alt
        >
      </div>

      <div class="keda-login-row mt_20">
        <div class="keda-login-btn" v-on:click="loginClick">{{btnText}}</div>
      </div>
    </div>
  </div>
</template>



<script>
import Toastr from "toastr";

import UserApi from "@/api/UserApi.js";

import  {SiteUrl}  from "@/mixins/Config.js";

export default {
  name: "LoginCard",
  props: {
    backUrl: {
      type: String,
      default: ""
    }
  },
  data() {
    return {
      form: {
        loginName: "admin",
        pwd: "123456",
        checkCode: ""
      },
      btnText: "登陆"
    };
  },
  methods: {
    loginClick() {

      var that=this;

      console.log(UserApi, "usrapi");

      if (this.form.loginName == "") {
        Toastr.error("用户名不能为空!");
        return false;
      }

      if (this.form.pwd == "") {
        Toastr.error("用户名不能为空!");
        return false;
      }

      if (this.form.checkCode == "") {
        Toastr.error("验证码不能为空!");
        return false;
      }

      UserApi.Login().then(res => {
        //自行实现再加调

        localStorage.setItem("portal_token",res.token);
        localStorage.setItem("portal_userinfo",JSON.stringify(res.userInfo));

        if (that.backUrl && that.backUrl.length > 0) {
          that.backUrl =that.backUrl +(that.backUrl.indexOf("?") > -1 ? "&" : "?") +"token=" +res.token;
          top.window.location.href = that.backUrl; //暂用全路径测试
          return false;
        }

        this.btnText = "登陆成功,正在跳转...";
        this.$emit("emit_login_call_back", res);
      });
    }
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.keda-login {
  width: 300px;
  height: 250px;
  border: 1px red solid;
  padding: 10px;
  border: 1px #ccc solid;
  background: white;
}
.keda-login .keda-login-form {
  margin: 10px;
  height: cacl(100% - 40px);
}

.keda-login .keda-login-row {
  height: 50px;
}

.keda-login .keda-login-row input[type="text"] {
  width: 100%;
}

.keda-login .keda-login-btn {
  width: 100%;
  height: 34px;
  line-height: 34px;
  color: white;
  text-align: center;
  border: 1px #dedede solid;
  cursor: pointer;
  background: black;
}

.keda-login .keda-login-btn:hover {
  border: 1px #2e8cc1 solid;
  background-color: white;
  color: #2e8cc1;
}

.keda-login .keda-login-row input[type="text"].chk_code_input {
  width: 154px;
}

.keda-login .chk_code_img {
  width: 100px;
  height: 32px;
  display: inline-block;
  vertical-align: bottom;
}
</style>
